<template>
  <div>
    <Page ref="page" :search-config="searchConfig" :table-config="tableConfig" :toolbar-config="toolbarConfig" />
    <ProductDetail ref="productDetail" />
  </div>
</template>
<script setup lang="ts">
import { getProductPageList, delProduct } from "@/api/product/productApi";
import { MPage as Page } from "page-com";
import { PageSearchConfig, PageTableConfig, ToolbarConfig, type PageInstance } from "page-com";
import { reactive, shallowReactive, useTemplateRef } from "vue";
import { msgConfirm, successMsg } from "@/utils/message";
import { hasPerms } from "@/utils/auth";
import use from "@/utils/use";
import { getBrandSelect } from "@/api/product/brandApi";
import ProductDetail from "./ProductDetail.vue";
import { useOffineIcon } from "@/components/ReIcon/src/hooks";
const { gotoPage } = use();
const searchConfig = shallowReactive<PageSearchConfig>({
  pageSearchFrame: [
    {
      frameType: "input",
      key: "productName",
      label: "商品名称"
    },
    {
      frameType: "input",
      key: "productDesc",
      label: "商品描述"
    },
    {
      frameType: "input",
      key: "brandId",
      label: "品牌id",
      options: getBrandSelect().then(v => v.data)
    },
    {
      frameType: "datetimerange",
      key: "createTime",
      searchKey: ["createTimeStart", "createTimeEnd"],
      label: "创建时间"
    }
  ],
  searchFun: getProductPageList
});
const tableConfig = reactive<PageTableConfig>({
  pageTableFrame: [
    {
      key: "productName",
      label: "商品名称"
    },
    {
      key: "productDesc",
      label: "商品描述"
    },
    {
      key: "brandName",
      label: "品牌"
    },
    {
      key: "categoryName",
      label: "分类",
      render: (data: any) => {
        return data.join("\n");
      }
    },
    {
      key: "createTime",
      label: "创建时间"
    },
    {
      key: "updateTime",
      label: "修改时间"
    },
    {
      frameType: "multi",
      key: "multi",
      label: "操作",
      separate: "",
      multi: [
        {
          frameType: "link",
          value: "删除",
          key: "deleteBtn",
          icon: useOffineIcon("ep:delete"),
          click: showDel,
          visible: hasPerms("/product/product/del")
        },
        {
          frameType: "link",
          value: "详情",
          key: "detailBtn",
          icon: useOffineIcon("ep:document"),
          click: showDetail
        }
      ]
    }
  ]
});
const toolbarConfig = shallowReactive<ToolbarConfig>({
  buttons: [
    {
      value: "添加",
      click: showAdd,
      visible: hasPerms("/product/product/add")
    }
  ]
});
const page = useTemplateRef<PageInstance>("page");
function showAdd() {
  gotoPage("/product/product/ProductAdd");
}
function addSuccess() {
  page.value.onSearch();
}
function updateSuccess() {
  page.value.onSearch();
}

function showDel(vo: ShopProductVo) {
  msgConfirm("确认删除吗？", async () => {
    let res = await delProduct({ id: vo.id });
    if (res.code == RESPONSE_CODE.SUCCESS) {
      successMsg("删除成功");
      page.value.onSearch();
    }
    return res;
  });
}
const productDetail = useTemplateRef("productDetail");
function showDetail(vo: ShopProductVo) {
  productDetail.value.show(vo.id);
}
</script>
